<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    {% load staticfiles %}
    <script src="{% static 'js/virtualjoystick.js' %}"></script>
    <script src="{% static 'js/jquery_min.js' %}"></script>

    
    <style>
    body {
      overflow  : hidden;
      padding   : 0;
      margin    : 0;
      background-color: #BBB;
    }
    #info {
      position  : relative;
      top   : 0px;
      width   : 100%;
      padding   : 5px;
      text-align  : center;
    }
    #info a {
      color   : #66F;
      text-decoration : none;
    }
    #info a:hover {
      text-decoration : underline;
    }
    .container {
      width   : 500px;
      height    : 500px;
      overflow  : hidden;
      padding   : 0;
      margin    : 0%;
      -webkit-user-select : none;
      -moz-user-select  : none;
      display: flex;
    }
    
    </style>
</head>
<body>
{% block content %}

    <h1>GUI</h1>
    <form action="" method="POST"> 
    {% csrf_token %}
        {{ form.as_p }}
    <input type="submit" name="action" value="Up" ></input>
    <input type="submit" name="action" value="Left" ></input>
    <input type="submit" name="action" value="Down" ></i></input>
    <input type="submit" name="action" value="Right" ></input>
    <input type="submit" name="action" value="Ac1_Up" ></input>
    <input type="submit" name="action" value="Ac1_Down" ></input>
    <input type="submit" name="action" value="Ac2_Up" ></input>
    <input type="submit" name="action" value="Ac2_Down" ></input>
    <input type="submit" name="action" value="Ac3_Up" ></input>
    <input type="submit" name="action" value="Ac3_Down" ></input>
    <input type="submit" name="action" value="Ac4_Up" ></input>
    <input type="submit" name="action" value="Ac4_Down" ></input>
    <input type="submit" name="action" value="Grip_Up" ></input>
    <input type="submit" name="action" value="Grip_Down" ></input>    
    <input type="submit" name="action" value="Stop_All" ></input>
    </form>
    {{output}}

<!--   <div class="row server-stream">

        <div id="video_pane" style="margin: auto; border: 1px solid black; display: table;">
          
        <object type="application/x-shockwave-flash" id="flash_video_obj" name="flash_video_obj" class="video-display" data="http://192.168.0.109:8080/mjp.swf" width="1024" height="768"><param name="quality" value="high"><param name="bgcolor" value="#cccccc"><param name="allowscriptaccess" value="always"><param name="allowfullscreen" value="true"><param name="flashvars" value="cvideo=/video&amp;video=http://192.168.0.109:8080/video4flash&amp;audio=http://192.168.0.109:8080/audio.wav&amp;twa=http://192.168.0.109:8080//audioin.alaw&amp;mode=Vat&amp;wwidth=1024&amp;wheight=768&amp;debug=true"></object></div>
  </div>  -->
  <span id="result_1"></span>
  <br></br>
  <span id="result_2"></span>
  <div class="container" >

  </div>

  <script>
      var URL = "{% url 'index' %}";
  </script>
  <script>
      console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
  
      var joystick1 = new VirtualJoystick({
                      mouseSupport: true,
                      stationaryBase: true,
                      baseX: 125,
                      baseY: 200,
                      strokeStyle: 'red',
                      limitStickTravel: true,
                      stickRadius: 50
                   });

      var joystick2 = new VirtualJoystick({
                      mouseSupport: true,
                      stationaryBase: true,
                      baseX: 375,
                      baseY: 200,
                      strokeStyle: 'blue',
                      limitStickTravel: true,
                      stickRadius: 50
                   });

      // setInterval(function(){
      //   var outputEl  = document.getElementById('result_1');
      //   outputEl.innerHTML  = '<b>Result:</b> '
      //     + ' dx:'+joystick1.deltaX()
      //     + ' dy:'+joystick1.deltaY()
      //     + (joystick1.right() ? ' right'  : '')
      //     + (joystick1.up()  ? ' up'   : '')
      //     + (joystick1.left()  ? ' left' : '')
      //     + (joystick1.down()  ? ' down'   : '') 
      // }, 1/30 * 1000);

      // setInterval(function(){
      //   var outputEl  = document.getElementById('result_2');
      //   outputEl.innerHTML  = '<b>Result:</b> '
      //     + ' dx:'+joystick2.deltaX()
      //     + ' dy:'+joystick2.deltaY()
      //     + (joystick2.right() ? ' right'  : '')
      //     + (joystick2.up()  ? ' up'   : '')
      //     + (joystick2.left()  ? ' left' : '')
      //     + (joystick2.down()  ? ' down'   : '') 
      // }, 1/30 * 1000);


      setInterval(function (){
        var data_1 = {'dataX_1': joystick1.deltaX(), 'dataY_1': joystick1.deltaY()};
        var data_2 = {'dataX_2': joystick2.deltaX(), 'dataY_2': joystick2.deltaY()};
        if(joystick1.pressed()){
          $.post(URL, data_1);}
        if(joystick2.pressed()){
          $.post(URL, data_2);}
      }, 1/30 * 1000);    
    </script>


{% endblock %}
</body>
</html>